<template>
  <div class="wrapper">
    <en-table-layout
      toolbar
      pagination
      ref="tableLayout"
      :height="tableHeight"
      :loading="loading"
      :tableData="dataList"
      :selectionChange="selectionChange">
      <div slot="toolbar" class="inner-toolbar">
        <div>
          <el-button type="primary" @click="openAbnormalDialog()">异常上报</el-button>
          <el-button type="primary" @click="openAbnormalProcess()">异常处理</el-button>
          <el-button type="primary" @click="openAbnormalcomplete()">处理完成</el-button>
          <el-button type="primary" @click="openAbnormalRevoke()">异常撤销</el-button>
          <el-button type="primary" @click="openAbnormalExport()">批量导出</el-button>
          <el-button type="primary" @click="openAbnormalImport()">批量导入</el-button>
          <el-button type="primary" @click="openAbnormalPhone()">发送短信</el-button>
        </div>
        <div class="toolbar-search">
          <en-table-search
          @search="searchEvent"
          advancedWidth="520"
          @advancedSearch="advancedSearchEvent"
          advanced
          placeholder="请输入订单号">
          <template slot="advanced-content">
            <el-form :model="advancedForm" label-width="100px" ref="advancedForm">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="ship_mobile" label="收货人手机">
                    <el-input v-model="advancedForm.ship_mobile" placeholder="请输入收货人手机" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="exception_sn" label="异常单号:">
                    <el-input v-model="advancedForm.exception_sn" placeholder="请输入异常单号" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="order_sn" label="订单号">
                    <el-input v-model="advancedForm.order_sn" placeholder="请输入订单号" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="member_nickname" label="买家昵称">
                    <el-input v-model="advancedForm.member_nickname" placeholder="请输入买家昵称" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="exception_status" label="异常状态">
                    <el-select v-model="advancedForm.exception_status" placeholder="请输入异常处理状态" clearable>
                      <el-option
                      v-for="(item,index) in exceptionStatus"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="exception_source" label="上报来源">
                    <el-select v-model="advancedForm.exception_source" placeholder="请输入上报来源" clearable>
                      <el-option
                      v-for="(item,index) in exceptionSources"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="exception_type" label="异常类型">
                    <el-select v-model="advancedForm.exception_type" placeholder="请输入异常类型" clearable>
                      <el-option
                      v-for="(item,index) in exceptionTypes"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="member_realname_lv1" label="团长姓名">
                    <el-input v-model="advancedForm.member_realname_lv1" placeholder="请输入一级团长真实姓名" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="site_name" label="站点名">
                    <el-input v-model="advancedForm.site_name" placeholder="请输入站点名" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="ship_name" label="收货人姓名">
                    <el-input v-model="advancedForm.ship_name" placeholder="请输入收货人姓名" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10"  class="search-picker">
                <el-col :span="6">
                  <el-select v-model="advancedForm.time_type" placeholder="请选择类型" clearable>
                    <el-option
                    v-for="(item,index) in timeTypes"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="18">
                  <el-date-picker
                    v-model="advancedForm.times_range"
                    clearable
                    type="datetimerange"
                    align="center"
                    :editable="false"
                    value-format="timestamp"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']">
                  </el-date-picker>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </en-table-search>
        </div>
      </div>
      <template slot="table-columns">
        <el-table-column width="60" type="selection" />
        <el-table-column min-width="120" prop="exception_sn" label="异常单号"></el-table-column>
        <el-table-column min-width="150" prop="order_sn" label="订单号"></el-table-column>
        <el-table-column min-width="70" prop="exception_status_text" label="处理状态"></el-table-column>
        <el-table-column min-width="90" prop="exception_source_text" label="上报来源"></el-table-column>
        <el-table-column min-width="70" prop="exception_type_text" label="异常类型"></el-table-column>
        <el-table-column min-width="150" prop="exception_description" label="异常描述">
          <template slot-scope=" {row} " >
            <el-tooltip class="item" effect="dark" :content="row.exception_description" placement="top" >
              <span class="text-hidden">{{row.exception_description}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="solve_explain" label="解决说明"></el-table-column>
        <el-table-column min-width="200" prop="solve_types" label="解决方式">
          <template slot-scope="{ row }">
            <span class="search-view" @click="openAbnormalProcessView(row.exception_id)">{{row.solve_types}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="120" prop="member_score" label="客户评分"></el-table-column>
        <el-table-column min-width="120" prop="member_comment" label="客户评价"></el-table-column> -->
        <el-table-column min-width="120" prop="order_type_text" label="订单类型"></el-table-column>
        <el-table-column min-width="120" prop="shipping_type_text" label="配送方式"></el-table-column>
        <el-table-column min-width="120" prop="member_nickname" label="买家昵称"></el-table-column>
        <el-table-column min-width="120" prop="ship_name" label="收货人"></el-table-column>
        <el-table-column min-width="120" prop="ship_mobile" label="收货电话"></el-table-column>
        <el-table-column min-width="120" prop="ship_addr" label="收货地址"></el-table-column>
        <el-table-column min-width="120" prop="member_realname_lv1" label="团长姓名"></el-table-column>
        <el-table-column min-width="120" prop="member_mobile_lv1" label="团长电话"></el-table-column>
        <el-table-column min-width="120" prop="site_name" label="站点名"></el-table-column>
        <el-table-column min-width="120" prop="site_leader_name" label="站长名称"></el-table-column>
        <el-table-column min-width="120" prop="site_leader_mobile" label="站点电话"></el-table-column>
        <el-table-column min-width="150" prop="create_time" label="上报时间">
          <template slot-scope="{row}">
            <span>{{row.create_time | unixToDate('yyyy-MM-dd hh:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="create_name" label="上报人"></el-table-column>
        <el-table-column min-width="150" prop="recive_time" label="接单时间">
          <template slot-scope="{row}">
            <span>{{row.recive_time | unixToDate('yyyy-MM-dd hh:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="recive_name" label="接单人"></el-table-column>
        <el-table-column min-width="150" label="处理时间">
          <template slot-scope="{row}">
            <span>{{row.process_time | unixToDate('yyyy-MM-dd hh:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="process_name" label="处理人"></el-table-column>
        <el-table-column min-width="150" prop="complete_time" label="完成时间">
          <template slot-scope="{row}">
            <span>{{row.complete_time | unixToDate('yyyy-MM-dd hh:mm:ss')}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="120" prop="finish_time" label="结单时间">
          <template slot-scope="{row}">
            <span>{{row.finish_time | unixToDate('yyyy-MM-dd hh:mm')}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120" prop="finish_name" label="结单人"></el-table-column>
        <el-table-column min-width="120" prop="" label=""></el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button
              size="mini"
              type="success"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              >删除
            </el-button>
          </template>
        </el-table-column> -->
      </template>
      <el-pagination
        slot="pagination"
        v-if="dataList"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="params.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total">
      </el-pagination>
    </en-table-layout>
    <!--异常上报-->
    <el-dialog title="异常上报" width="35%" :visible.sync="abnormalReportDialog">
      <el-form :model="abnormalForm" label-width="90px" ref="abnormalForm" :rules="abnormalRules">
        <el-row>
          <el-col :span="18">
            <el-form-item label="异常来源" prop="exception_source">
              <el-select v-model="abnormalForm.exception_source" placeholder="请输入异常来源" clearable>
                <el-option
                v-for="(item,index) in exceptionSources"
                :key="index"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="异常类型" prop="exception_type">
              <el-select v-model="abnormalForm.exception_type" placeholder="请选择异常类型" clearable>
                <el-option
                v-for="(item,index) in exceptionTypes"
                :key="index"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="订单编号" prop="order_sn">
              <el-input v-model="abnormalForm.order_sn" placeholder="请输入异常订单号" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="异常描述" prop="exception_description">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}"  v-model="abnormalForm.exception_description" placeholder="请描述订单异常问题" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAbnormalCancel()">取 消</el-button>
        <el-button type="primary" @click="handleAbnormalSubmit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 批量导入 -->
    <el-dialog title="批量导入" width="35%" :visible.sync="abnormalImportDialog">
      <el-form
        ref="importForm"
        class="customerForm"
        label-width="100px"
        size="small"
        :model="importForm"
        >
        <div class="upload">
          <div class="el-upload__tip" slot="tip">只能上传 .xlsx, .xls文件</div>
            <el-upload
              :limit="1"
              drag
              v-model="importForm.file"
              action="#"
              :http-request="excelLoadShow"
              :on-change="onChange">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer mt5">
        <el-button size="small" type="primary"  @click="submitFileForm()">确 定</el-button>
        <el-button size="small" @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 发送短信 -->
    <el-dialog title="发送短信" width="35%" :visible.sync="abnormalPhoneDialog">
      <el-form
        ref="messageForm"
        class="customerForm"
        label-width="100px"
        size="small"
        :model="messageForm"
        :rules="messageRulesForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="发送对象:" prop="name">
                  <el-radio-group v-model="messageForm.name" @change="reciverChange">
                    <el-radio :label="1">下单用户</el-radio>
                    <el-radio :label="2">收货人</el-radio>
                    <el-radio :label="3">团长</el-radio>
                    <el-radio :label="4">其他</el-radio>
                  </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="messageForm.mobile"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="短信内容:" prop="content">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="messageForm.content"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer mt5">
        <el-button size="small" type="primary"  @click="handleMessageSubmit('messageForm')">确 定</el-button>
        <el-button size="small" @click="handleMessageCancel('messageForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { api } from '~/ui-domain'
  const actionImportUrl = `${api.seller}/seller/after-sales/exception_order/import`;
  import * as API_Messages from '@/api/message'
  import Storage from '@/utils/storage'
  import { importExceptionOrder } from '@/api/message'

  export default {
    name: '',
    data () {
      return {
        // table数据
        dataList: [],
        // 多选
        multipleChoice: [],
        // 分页
        params: {
          page_no: 1,
          page_size: 10
        },
        data_total: 0,
        // 加载动画
        loading: false,
        files: undefined,
        uploadFile: actionImportUrl,
        // 提交表单
        abnormalForm: {
          force_inerst: false
        },
        // 批量导入
        importForm: {
          file: undefined
        },
        // 发送短信
        messageForm: {
          name: 4,
          mobile: undefined,
          content: undefined
        },
        itemException: {},
        // 异常类型
        exceptionTypes: [],
        // 异常来源
        exceptionSources: [],
        // 异常处理
        exceptionStatus: [],
        // 时间类型
        timeTypes: [],
        // 高级搜索表单
        advancedForm: {
          time_type: undefined,
          exception_sn: undefined,
          order_sn: undefined,
          member_nickname: undefined,
          exception_status: undefined,
          exception_source: undefined,
          exception_type: undefined,
          member_realname_lv1: undefined,
          site_name: undefined,
          ship_name: undefined,
          ship_mobile: undefined,
          times_range: [],
          start_time: undefined,
          end_time: undefined
        },
        // 上报弹框
        abnormalReportDialog: false,
        // 处理完成
        abnormalImportDialog: false,
        // 发送短信
        abnormalPhoneDialog: false,
        // 表单校验
        abnormalRules: {
          exception_source: [
            {
              required: true,
              message: '异常来源不能为空',
              trigger: 'blur'
            }
          ],
          exception_type: [
            {
              required: true,
              message: '异常类型不能为空',
              trigger: 'blur'
            }
          ],
          order_sn: [
            {
              required: true,
              message: '订单编号不能为空',
              trigger: 'blur'
            }
          ],
          exception_description: [
            {
              required: true,
              message: '异常描述不能为空',
              trigger: 'blur'
            }
          ]
        },
        messageRulesForm: {
          name: [
            {
              required: true,
              message: '发送对象不能为空',
              trigger: 'blur'
            }
          ],
          mobile: [
            {
              required: true,
              message: '手机号不能为空',
              trigger: 'blur'
            }
          ],
          content: [
            {
              required: true,
              message: '短信内容不能为空',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      tableHeight (){
        return document.documentElement.clientHeight - 246 + 'px';
      }
    },
    created () {

    },
    mounted() {
      this.getDataList();
      this.getExceptionEnums();
    },
    methods: {
      // 渲染table表格
      getDataList() {
        this.loading = true;
        API_Messages.getExceptionOrderList(this.params).then(response => {
          this.dataList = response.data;
          this.data_total = response.data_total;
          this.loading = false;
        })
      },
      // 异常类型枚举
      getExceptionEnums() {
        API_Messages.queryExceptionEnums()
          .then(response => {
            this.exceptionSources = response[0].exceptionSources;
            this.exceptionTypes = response[1].exceptionTypes;
            this.exceptionStatus = response[2].exceptionStatus;
            this.timeTypes = response[3].exceptionTimeType;
          })
          .catch((error) => {
            this.$message({
              type: 'error',
              message: error
            })
          })
      },
      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size;
        this.getDataList();
      },
      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page;
        this.getDataList();
      },
      // 多线
      selectionChange(value) {
        this.multipleChoice = value;
      },
      // 打开弹框
      openAbnormalDialog() {
        this.abnormalReportDialog = true;
      },
      // 确定按钮
      handleAbnormalSubmit() {
        this.$refs.abnormalForm.validate((valide) => {
          if (valide) {
            API_Messages.addExceptionOrder(this.abnormalForm)
              .then(response => {
                if (response.code === 625 || response.code === 624) {
                  this.$confirm(
                    response.message + '，是否继续上报异常？'
                  ).then(_ => {
                    this.abnormalForm.force_inerst = true;
                    this.handleAbnormalSubmit();
                  }).catch(_ => {
                    this.$message({
                      type: 'warning',
                      message: '操作已取消'
                    })
                  })
                } else if (response.code === 200) {
                  this.$message({
                    type: 'success',
                    message: response.message
                  })
                  this.$refs['abnormalForm'].resetFields();
                  this.abnormalForm.force_inerst = false;
                  this.abnormalReportDialog = false;
                  this.getDataList();
                } else {
                  this.$message({
                    type: 'error',
                    message: response.message
                  })
                }
              }).catch((error) => {
                console.log(error)
              })
          }
        })
      },
      // 异常处理
      openAbnormalProcess() {
        if (this.multipleChoice.length === 0) {
          this.$message({
            type: 'warning',
            message: '您还没有选择一条数据哦!!!'
          })
          return
        } else if (this.multipleChoice.length > 1) {
          this.$message({
            type: 'error',
            message: '异常处理一次只能处理一条数据哦!!!'
          })
          return
        } else if (this.multipleChoice[0].exception_status_text !== '待处理') {
          this.$message({
            type: 'error',
            message: '异常处理的数据只能是待处理的!!!'
          })
          return
        } else  {
          this.multipleChoice.forEach(item => {
            this.$router.push({ path: `abnormal-process/${item.exception_id}`, query: { exceptionSn: item.exception_sn, orderSn: item.order_sn }})
          })
        }
      },
      // 取消按钮
      handleAbnormalCancel() {
        this.abnormalReportDialog = false;
        this.$refs['abnormalForm'].resetFields();
      },
      // 订单查询
      searchEvent(data) {
        this.params = {
          ...this.params,
          order_sn: data
        }
        this.params.page_no = 1;
        this.getDataList();
      },
      // 高级搜索
      advancedSearchEvent() {
        if (this.advancedForm.times_range.length > 0) {
          if (this.advancedForm.time_type === undefined) {
            this.$message({
              type: 'error',
              message: '查询类型必选项!'
            })
            return
          }
          this.advancedForm.start_time = this.advancedForm.times_range[0] / 1000;
          this.advancedForm.end_time = this.advancedForm.times_range[1] / 1000;
        }
        this.params = {
          ...this.params,
          ...this.advancedForm
        }
        this.params.page_no = 1;
        this.getDataList();
      },
      // 处理完成
      openAbnormalcomplete() {
        if (this.multipleChoice.length > 0) {
          let exception_ids = [];
          this.multipleChoice.forEach(item => {
            exception_ids.push(item.exception_id);
            if (item.exception_status_text === '已取消') {
              this.$message({
                type: 'error',
                message: '已取消的状态不能再次处理!!!'
              })
              return
            } else {
              this.$confirm('处理完成后不可修改, 确定完成了吗')
                .then(_ => {
                  API_Messages.getProcessSuccess(exception_ids)
                    .then(response => {
                      if (response.code === 200) {
                        this.$message({
                          type: 'success',
                          message: '操作成功'
                        });
                        this.getDataList();
                      } else {
                        this.$message({
                          type: 'error',
                          message: response.message
                        });
                      }
                    });
                })
                .catch(_ => {
                  this.$message({
                    type: 'warning',
                    message: '操作取消'
                  });
                });
            }
          });
        } else {
          this.$message({
            type: 'error',
            message: '处理完成至少选择一条!!!'
          });
        }
      },
      // 异常撤销
      openAbnormalRevoke() {
        if (this.multipleChoice.length > 0) {
          let exception_ids = [];
          this.multipleChoice.forEach(item => {
            exception_ids.push(item.exception_id);
          })
          this.$confirm('异常撤销后不可恢复, 确定撤销吗?')
            .then(_ => {
              API_Messages.getExceptionOrderCancel(exception_ids).then(response => {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                });
                this.getDataList();
              });
            })
            .catch(_ => {
              this.$message({
                type: 'warning',
                message: '操作取消'
              });
            });
        } else {
          this.$message({
            type: 'error',
            message: '异常撤销至少选择一条!!!'
          });
        }
      },
      // 批量导出
      openAbnormalExport() {
        API_Messages.exportExceptionOrder(this.params)
          .then(response => {
            // 处理返回的文件流
            let blob = new Blob([response], {
              type: 'application/vnd.ms-excel;charset=utf-8'
            });
            let date = new Date().getFullYear() + '' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
            const fileName = date + name + '异常单.xlsx';
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName);
            }
          })
          .catch((error) => {
            this.$message({
              type: 'error',
              message: error
            })
          })
      },
      openAbnormalImport() {
        this.abnormalImportDialog = true;
      },
      /*
      * @date 2020-09-23
      * @author 张凯强
      * @description {批量导入}
      */
      excelLoadShow (content) {
        this.files = content.file;
      },
      onChange() {

      },
      // 批量导入确定按钮
      submitFileForm () {
        const refreshToken = Storage.getItem('seller_refresh_token');
        let file = new FormData();
        file.append('file', this.files);
        this.$http({
          url: actionImportUrl,
          method: 'post',
          data: file,
          headers: {
            "Authorization": refreshToken
          }
        }).then(response => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.abnormalImportDialog = false;
        }).catch(error => {
          console.log(error)
        })
      },
      // 取消
      handleCancel () {
        this.abnormalImportDialog = false;
      },
      // 点击表格里的解决方式跳转页面
      openAbnormalProcessView (id) {
        this.$router.push({ path: 'abnormal-process/' + id });
      },
      // 发送短信
      openAbnormalPhone() {
        if (this.multipleChoice.length === 1) {
          this.abnormalPhoneDialog = true;
          this.itemException = this.multipleChoice[0];
          API_Messages.getMessageTemplete(this.itemException.order_sn).then(response => {
            this.messageForm.content = response;
          });
        } else {
          this.$message({
            type: 'error',
            message: '只能选择一条数据哦!!!'
          })
          return
        }
      },
      //短信发送对象单选框值改变触发事件
      reciverChange(reciverId) {
        switch (reciverId){
          case 1:
            this.messageForm.mobile = this.itemException.member_mobile;
            break
          case 2:
            this.messageForm.mobile = this.itemException.ship_mobile;
            break
          case 3:
            this.messageForm.mobile = this.itemException.member_mobile_lv1;
            break
          default:
            this.messageForm.mobile = undefined;
            break
        }
      },
      //点击确定发送短信
      handleMessageSubmit(messageForm) {
        this.$refs[messageForm].validate((valide) => {
          if (valide) {
            API_Messages.sendMessage(this.messageForm).then(response => {
              this.$message({
                type: 'success',
                message: '发送成功'
              });
              this.abnormalPhoneDialog = false;
              this.getDataList();
            });
          }
        })
      },
      //发送短信表单取消按钮函数
      handleMessageCancel(messageForm) {
        this.$refs['messageForm'].resetFields()
        this.abnormalPhoneDialog = false;
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .wrapper {

    .el-select {
      width: 100%;
    }
    /deep/ div.toolbar {
      height: 70px;
      padding: 20px 0;
    }

    /deep/ .el-table {
      padding: 10px;
      width: 100%;
      overflow-x: scroll;
      & td:not(.is-left) {
        text-align: center;
      }
    }

    /deep/ .el-popover {
      width: 800px;
    }

    .inner-toolbar {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    /deep/ .pop-sku {
      .toolbar {
        display: none;
      }
      .el-dialog__body {
        .el-table {
          border: 1px solid #e5e5e5;
        }
      }
      .el-table__body-wrapper {
        max-height: 400px;
        overflow-y: scroll;
      }
    }

    /deep/ .el-tooltip__popper {
      max-width: 100px !important;
    }

    .el-tooltip__popper {
      max-width: 100px;
    }

    .toolbar-search {
      margin-right: 10px;
      width: 20%;
    }

    .search-picker {
      padding-bottom: 10px;
    }

    .upload {
      text-align: center;
    }

    .search-view {
      color: #00a2d4;
      cursor: pointer;
    }

    .text-hidden {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      color: #576574;
      word-break: break-all;
    }

  }

</style>

<style>

    .el-tooltip__popper {
      max-width: 300px !important;
    }

</style>
